<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

const props = defineProps<{
    activeTreeId?: number | string
    activehandler?: string
    parentTreeId?: number
}>()
// 当前tab标识：parentTreeId待定
const { activeTreeId, activehandler } = toRefs(props)
console.log('config1 activeTreeId', activeTreeId.value)

const topForm = defineModel<any>('topForm', { required: true })
const chooseGoodsId = defineModel<any>('chooseGoodsId', { required: false })
const chooseAdId = defineModel<any>('chooseAdId', { required: false })

// 后续传进来：是否展示顺序一项
const hasOrder = ref(true)

// 展示机制、轮播图，暂共用一个事件。后期看需求取消限制、直接放开按钮
function carouselSpeedChange() {
    topForm.value.isCarouselSpeedChange = true
}

const columns = computed(() => {
    return [
        {
            label: '内容配置',
            prop: 'isDefault',
            colProps: { span: 8 },
        },
        {
            label: '展示机制',
            prop: 'carouselType',
            colProps: { span: 8 },
            // 隐藏：非默认组 && （广告组、无广告id || 商品组、无商品id）
            hideInForm: computed(() => topForm.value.isDefault === 0 && ((activehandler.value === 'advertisementGroup' && !chooseAdId.value) || (activehandler.value !== 'advertisementGroup' && !chooseGoodsId.value))),
        },
        {
            label: '轮播速度(ms)',
            prop: 'carouselSpeed',
            colProps: { span: 8 },
            // fieldProps: { min: 0, precision: 0, step: 500 },
            // valueType: 'input-number',
            hideInForm: computed(() => topForm.value.isDefault === 0 && ((activehandler.value === 'advertisementGroup' && !chooseAdId.value) || activehandler.value !== 'advertisementGroup')),
        },
        {
            label: '顺序',
            prop: 'sort',
            colProps: { span: 8 },
            hideInForm: computed(() => hasOrder.value === true),
        },

    ]
})

const rules = {
    isDefault: [
        {
            required: true,
        },
    ],
    carouselType: [
        {
            required: true,
        },
    ],
    carouselSpeed: [
        {
            message: '请输入轮播速度',
            required: true,
        },
    ],
    sort: [
        {
            message: '请输入顺序', // 选的？？
            required: true,
        },
    ],
}
</script>

<template>
    <ElCard class="mb-20"
            shadow="never"
    >
        <PlusForm v-model="topForm"
                  :columns="columns"
                  :label-width="120"
                  :rules="rules"
                  :has-footer="false"
                  :row-props="{ gutter: 20 }"
                  label-position="top"
        >
            <template #plus-field-isDefault>
                <el-radio-group v-model="topForm.isDefault">
                    <!-- v-if="activehandler === 'advertisementGroup'" -->
                    <el-radio label="默认配置"
                              :value="1"
                    />

                    <!-- 新房加上这个条件，可以屏蔽“从广告组选择”的按钮 -->
                    <!-- && parentTreeId === 1 -->
                    <el-radio v-if="activehandler === 'advertisementGroup'"
                              label="从广告组选择"
                              :value="0"
                    />

                    <el-radio v-if="activehandler === 'commodityGroup'"
                              label="从商品组选择"
                              :value="0"
                    />
                </el-radio-group>
            </template>

            <template #plus-field-carouselType>
                <el-radio-group v-model="topForm.carouselType"
                                @change="carouselSpeedChange"
                >
                    <el-radio label="顺序排序"
                              :value="0"
                    />

                    <el-radio label="随机排序"
                              :value="1"
                    />
                </el-radio-group>
                <!-- <el-link class="ml-20" :underline="false" type="success">配置</el-link> -->
            </template>

            <template #plus-field-carouselSpeed>
                <el-input-number v-model="topForm.carouselSpeed"
                                 :min="500"
                                 :step="500"
                                 @change="carouselSpeedChange"
                />
            </template>
        </plusform>
    </ElCard>
</template>

<style lang="scss" scoped>

</style>
